<template>
    <div class="iconsDiv">
         <swiper :options="swiperOption" ref="mySwiper">
            <!-- slides 这里根据图标数据长度来显示是否有轮播，大于8有，小于等于8就没有-->
            <swiper-slide class="swiperItem" v-for="(pagesitem,index) of pages" :key="index">
                <div class="iconsItem" v-for="item of pagesitem" :key="item.itemsId">
                    <div class="icons_img">
                        <img class="iconsImg" :src="item.iconUrl"/>
                    </div>
                    <p class="icons_desc">{{item.iconDesc}}</p>
                </div>
            </swiper-slide>
            <!-- Optional controls -->
            <div v-if="pages.length>1" class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    name : "HomeIcons" , 
    data (){
        return{
            swiperOption :{
                pagination: '.swiper-pagination'
            },
            itemsList:[{
                itemsId : "HomeIcons01",
                iconUrl : "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/557ba25df01d7dbf1419b095a11d1319.png",
                iconDesc: "温泉温泉温泉温泉温泉温泉温泉"
           },{
                itemsId : "HomeIcons02",
                iconUrl : "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/7c1e26fd490c3b65c2858fe5da96141c.png",
                iconDesc: "滑雪运动"
            },{
                itemsId : "HomeIcons03",
                iconUrl : "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/557ba25df01d7dbf1419b095a11d1319.png",
                iconDesc: "温泉"
           },{
                itemsId : "HomeIcons04",
                iconUrl : "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/7c1e26fd490c3b65c2858fe5da96141c.png",
                iconDesc: "滑雪运动"
            },{
                itemsId : "HomeIcons05",
                iconUrl : "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/557ba25df01d7dbf1419b095a11d1319.png",
                iconDesc: "温泉"
           },{
                itemsId : "HomeIcons06",
                iconUrl : "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/7c1e26fd490c3b65c2858fe5da96141c.png",
                iconDesc: "滑雪运动"
            },{
                itemsId : "HomeIcons07",
                iconUrl : "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/557ba25df01d7dbf1419b095a11d1319.png",
                iconDesc: "温泉"
           },{
                itemsId : "HomeIcons08",
                iconUrl : "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/7c1e26fd490c3b65c2858fe5da96141c.png",
                iconDesc: "滑雪运动"
            },{
                itemsId : "HomeIcons09",
                iconUrl : "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/557ba25df01d7dbf1419b095a11d1319.png",
                iconDesc: "温泉"
           },{
                itemsId : "HomeIcons10",
                iconUrl : "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/7c1e26fd490c3b65c2858fe5da96141c.png",
                iconDesc: "滑雪运动"
            }]
        }
    } ,
    computed:{
        pages(){  //根据图标数据长度生成二维数组进行轮播展示
            const pageArr = [];
            this.itemsList.forEach((item,index) => {
                const pageindex = Math.floor(index/8);
                if(!pageArr[pageindex]){
                   pageArr[pageindex]=[]; 
                }
                pageArr[pageindex].push(item);
            });
            return pageArr;
        }
    } 
}
</script>

<style lang="stylus" scoped>
    @import "~styles/varibles.styl"
    @import "~styles/mixins.styl"
    .iconsDiv
        overflow: hidden;
        height : 0
        padding-bottom :50%
        .iconsItem
            width:25%
            float:left
            height : 0
            padding-bottom : 25%
            position :relative
            .icons_img
                width :100%
                position :absolute
                top : 0
                left : 0
                bottom  : 0.44rem
                right : 0
                .iconsImg
                    display :block
                    width: 80%;
                    margin: 0.05rem auto 0;
        .icons_desc    
            display :block
            width: 100%;
            position :absolute
            bottom : 0
            line-height .44rem
            text-align :center
            overflow: hidden
            text-overflow: ellipsis
            white-space: nowrap
            color : $darkTextColor
            ellipsis()
</style>